<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    ul, ol {
        list-style: none;
    }

</style>
<body>
<div id="model-example">
    <my-checkbox v-model="foo" @click="showFoo" value="bar"></my-checkbox>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/currency-validator/index.js"></script>
<script>
    //不理解,先放下
    //子组件已经和它外部完全解耦了。它所做的只是报告自己的内部事件，至于父组件是否关心则与它无关
    Vue.component('my-checkbox', {
        template: '\
                    <div><label>checked</label><input type="checkbox" @change="show" checked value="yiersha"></div>\
                  ',
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: {
            checked:Boolean,
            value:String
        },
        methods: {
            show:function(){

            }
        }
    });
    var vm = new Vue({
        el: '#model-example',
        data: {
            foo:false,
            bar:''
        },
        methods: {
            showFoo:function(){
                console.log(this.foo);
                console.log(this.bar)
            }
        }
    })
    console.log(vm)
</script>